<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<md-step label="Define" md-complete="$ctrl.parent.vm.stepData[0].completed">
  <md-step-body>
    <md-content layout-padding class="gv-creation-general-content gv-creation-content">
      <form name="$ctrl.planGeneralForm">
        <section>
          <md-subheader>General</md-subheader>

          <div layout-gt-sm="row">
            <md-input-container class="md-block" flex-gt-sm>
              <label>Name</label>
              <input ng-model="$ctrl.parent.plan.name" type="text" required name="name" md-maxlength="50" />
              <div class="hint" ng-if="$ctrl.planGeneralForm.name.$valid || $ctrl.planGeneralForm.name.$pristine">Plan name</div>
              <div ng-messages="$ctrl.planGeneralForm.name.$error">
                <div ng-message="required">Name is required.</div>
                <div ng-message="md-maxlength">The name has to be less than 50 characters long.</div>
              </div>
            </md-input-container>
          </div>

          <div layout-gt-sm="row">
            <md-input-container class="md-block" flex-gt-sm>
              <label>Description</label>
              <input ng-model="$ctrl.parent.plan.description" type="text" required name="description" />
              <div class="hint" ng-if="$ctrl.planGeneralForm.description.$valid || $ctrl.planGeneralForm.description.$pristine">
                Provide a description of your plan, what it does, ...
              </div>
              <div ng-messages="$ctrl.planGeneralForm.description.$error">
                <div ng-message="required">Description is required.</div>
              </div>
            </md-input-container>
          </div>

          <div layout-gt-sm="row">
            <div class="md-block" flex-gt-sm>
              <label>Characteristics</label>
              <md-chips
                ng-model="$ctrl.parent.plan.characteristics"
                placeholder="Enter a characteristic"
                md-add-on-blur="true"
                secondary-placeholder="+Characteristic"
                ng-click="$ctrl.planGeneralForm.$setDirty()"
              ></md-chips>
            </div>
          </div>
        </section>

        <br />

        <section>
          <md-subheader>General Conditions</md-subheader>

          <div layout-gt-sm="row">
            <md-input-container class="md-block" flex="100">
              <label
                >Page of General Conditions
                <span class="italic warn-general-conditions" ng-if="$ctrl.parent.shouldNotEditConditions()">*</span>
              </label>
              <md-select ng-model="$ctrl.parent.plan.general_conditions">
                <md-option ng-repeat="page in $ctrl.parent.pages | orderBy:'name' " ng-value="page.id"> {{page.name}} </md-option>
              </md-select>
              <span class="italic warn-general-conditions" ng-if="$ctrl.parent.shouldNotEditConditions()">
                * This plan is published, if you change the general conditions please remember to notify you API subscribers</span
              >
            </md-input-container>
          </div>
        </section>

        <br />

        <section>
          <md-subheader>Subscriptions</md-subheader>

          <div layout-gt-md="row">
            <md-input-container class="md-block" flex-gt-md>
              <md-switch
                aria-label="Auto validate subscriptions"
                ng-model="$ctrl.parent.plan.validation"
                ng-true-value="'AUTO'"
                ng-disabled="plan.security == 'KEY_LESS'"
                ng-false-value="'MANUAL'"
              >
                Auto validate subscription.
              </md-switch>
            </md-input-container>
          </div>

          <div layout-gt-md="row">
            <md-input-container class="md-block" flex-gt-md>
              <md-switch
                aria-label="Consumer comment"
                ng-model="$ctrl.parent.plan.comment_required"
                ng-disabled="plan.security == 'KEY_LESS'"
              >
                Consumer must provide a comment when subscribing to the plan.
              </md-switch>
            </md-input-container>
            <md-input-container class="md-block" flex-gt-md>
              <label>Custom message to display to consumer</label>
              <input ng-model="$ctrl.parent.plan.comment_message" type="text" name="comment_message" md-maxlength="64" />
              <div ng-messages="$ctrl.planGeneralForm.comment_message.$error">
                <div ng-message="md-maxlength">The comment message has to be less than 64 characters long.</div>
              </div>
            </md-input-container>
          </div>
        </section>

        <br />

        <section>
          <md-subheader>Deployment</md-subheader>
          <div layout-gt-sm="row">
            <md-input-container class="md-block" flex="100">
              <label>Sharding tags</label>
              <md-select ng-model="$ctrl.parent.plan.tags" multiple>
                <md-option ng-repeat="tag in $ctrl.parent.tags" ng-value="tag.id" ng-disabled="$ctrl.parent.isTagDisabled(tag)">
                  {{tag.name}}<span ng-if="tag.description" class="gravitee-general-description"> - {{tag.description}}</span>
                </md-option>
              </md-select>
            </md-input-container>
          </div>
        </section>

        <br />

        <section>
          <md-subheader>Access-Control</md-subheader>

          <div layout-gt-sm="row">
            <md-input-container class="md-block" flex="100">
              <label>Groups excluded</label>
              <md-select
                ng-model="$ctrl.parent.plan.excluded_groups"
                multiple
                ng-disabled="!($ctrl.parent.groups && $ctrl.parent.groups.length > 0)"
              >
                <md-option ng-repeat="group in $ctrl.parent.groups | orderBy:'name'" ng-value="group.id"> {{group.name}} </md-option>
              </md-select>
            </md-input-container>
          </div>
        </section>
      </form>

      <br />

      <md-step-actions layout="row">
        <div flex layout="row" layout-align="end top">
          <md-button ng-disabled="$ctrl.planGeneralForm.$invalid" ng-click="$ctrl.gotoNextStep()">NEXT</md-button>
        </div>
      </md-step-actions>
    </md-content>
  </md-step-body>
</md-step>
